<script setup>
import UserInfo from '@/components/mine/UserInfo.vue'

defineOptions({
  name: 'MineIndex',
})
</script>

<template>
  <div class="mine-index">
    <div class="content">
      <!-- 头部个人信息区 -->
      <div class="top">
        <UserInfo />
      </div>

      <!-- tab标签和内容区 -->
      <div class="bottom">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="我的文章" name="Article" />
          <el-tab-pane label="收藏" name="Collection" />
          <el-tab-pane label="评论" name="Comment" />
          <el-tab-pane label="点赞" name="Like" />
        </el-tabs>
        <BlogList />
      </div>
    </div>

    <el-backtop :right="50" :bottom="50" />
  </div>
</template>

<style scoped lang="scss">
.mine-index {
  margin: 0 auto;
  padding: 24px 0;
  width: 60%;
  min-width: 1100px;

  .content {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .top {
      width: 100%;
      background-color: white;
      border-radius: 12px;
      transition: all 0.5s ease-in-out;

      &:hover {
        box-shadow: 0 8px 8px 8px rgba(0, 0, 0, 0.05);
      }
    }

    .bottom {
      padding: 16px 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      background-color: white;
      border-radius: 10px;
      transition: all 0.5s ease-in-out;
      &:hover {
        box-shadow: 0 8px 8px 8px rgba(0, 0, 0, 0.05);
      }
    }
  }
}
</style>
